var Options = window.Options || {};
var PlaceAPI = window.PlaceAPI || {};

var vue = new Vue({
     el: '#VueApp',
    delimiters: ['${', '}'],
     data: function(){
         return {
             keyword:"",
             delDisabled: true, //删除禁用
             getCodeDisabled:true, //获取代码
             stopDisabled:true, //停止 禁用
             startDisabled:true, //开始 禁用

             queryParams:{} ,// 搜索参数

             showPlaceSearch: false, //不显示筛选框
             drawerNewPlace: false, //新增广告位的抽屉drawer
             
             tableLoading:false,
             page: 1,
             total: 0,//总记录数
             pageSize:10,//分页数据量
             tablelist: [], //表数据
             multipleSelection:[] ,//被选中的行
             selectIds:[],
             idPlace:0 ,// 广告位ID，修改时赋值它
             dialogVisiable:false, //显示获取广告位代码的弹窗
             adsplaceCode:"", // 广告位代码
         }
     },
     created(){
        this.getListInfo();
     },
     watch:{
        //  全新或者选中某一行table 后，处理选中的id到一个数组
         multipleSelection: function(val, oldval){
            var tmp = [];
            if(val.length>0){
                for(var i in val){
                        tmp.push( val[i]['id']);
                }
                this.stopDisabled = false;
                this.delDisabled = false;
                this.startDisabled = false;
                this.getCodeDisabled = false;
            }else{
                this.stopDisabled = true;
                this.delDisabled = true;
                this.startDisabled = true;
                this.getCodeDisabled = true;
            }
            this.selectIds = tmp;
            //  console.log(this.selectIds)
         }
     },
     filters:{
    
     },
     methods:{
         refreshRowStatus( value ){             
            for(var i in this.selectIds){
                // console.log(this.selectIds[i])
                    for(var r in this.tablelist){
                        if(this.tablelist[r].id ==  this.selectIds[i]){
                            this.tablelist[r]['disabled'] = value;
                        }
                    }
            }
             this.$message({message:"设置成功", type: "success"})
             this.multipleSelection = [];
             this.$refs['tableAdsplaceList'].clearSelection();
         },
         /**广告位的 禁用 启动 删除 获取代码 click */
         onStop(){
             PlaceAPI.changeDisableStatus(this.selectIds, 3);
             this.refreshRowStatus(3);
         },
         onStart(){
             PlaceAPI.changeDisableStatus(this.selectIds, 2);
             this.refreshRowStatus(2);
         },
         onDelete(){
             PlaceAPI.changeDisableStatus(this.selectIds, 1);
             this.refreshRowStatus(1);
         },
         onGetCode(){ 
             if(this.selectIds.length>1){
                 this.$message({message:"只能选中一个广告位", type: "error"})
                 return;
             }
             var id = this.selectIds[0];
             var index = 0;
             var row = {};
             for(var i in this.tablelist){
                    if(id == this.tablelist[i]['id']){
                        index = i;
                        row = this.tablelist[i];
                        break;
                    }
             }
             this.handleGetcode(index, row)
         },
         onCloseDialog(value){
             this.dialogVisiable = value;
         },
        //  显示广告位代码
         handleGetcode(index, row){
             this.dialogVisiable = true;
            //  console.log(index, row)
             var host = window.location.protocol+"//" + window.location.host;
            var code = '<script>\n'
                + '(function () {\n'
                +  'var xf = "_" + Math.random().toString(36).slice(2);\n'
                +  "     document.write('<div id=\"' + xf + '\"></div>\');\n"
                +  '     (window.Xfsoltjump = window.Xfsoltjump || []).push({\n'
                +  "         id: '" + row.id +"',\n"
                +  "         container: xf,\n"
                +  "         size: '" + row.placeWidth + row.sizeDot + row.placeHeight +"',\n"
                +  "         display: 'inlay-fix'\n"
                +  '      });\n'
                +  '   })();\n'
 
                +  '</script>\n'
                +  '<script src="' + host +'/plugins/AdsPlace/js/page/showad.js"></script>\n';

             this.adsplaceCode = "<p><textarea style='width:100%;' rows='8' cols=9> "+ code +" </textarea></p>"
         },
         //=======
         OnShowPlaceSearch(){
             this.showPlaceSearch = this.showPlaceSearch ? false: true;
             this.$refs.dropIcon.className = this.showPlaceSearch ? "el-icon-caret-bottom" : "el-icon-caret-top";
         },
         //关键词搜索
         onKeywordChange(value){
             this.queryParams['keyword'] = this.keyword;
             this.getListInfo()
         },
         //六个下拉change触发
         onSelectChange(e){
            // console.log(e);
            // 把搜索条件 发送给接口 获取列表
            this.page = 1;
            this.queryParams = e;
            this.queryParams['keyword'] = this.keyword;
            this.getListInfo()
         },
         // 表单组件提交表单 后成功，关闭抽屉
         onCloseDrawer(e) {
            //  console.log(e)
             //e == { from: "submit"}
             this.submit = e.from;
             this.$refs.newPlaceDrawer.closeDrawer();
             this.getListInfo();
             /* 
             closeDrawer 方法会先调用  
             下面的 handleDrawerClose 方法进行关闭
              因为设置了 before-close 属性
              所以通过设置一个 submit 变量进行判断 关闭 来自 关闭按钮，还是表单提交后。
              */
         },
         // 点击抽屉右上角 关闭按钮，关闭新建广告位的drawer
         handleDrawerClose(done) {
            //  console.log(this.submit)
             if (this.submit == 'submit') {
                 done();
                 return;
             }
             this.$confirm('确认关闭？')
                 .then(_ => {
                     done();
                 })
                 .catch(_ => { });
         },
         handlePageSize  (size) {
             this.pageSize = size;
             this.getListInfo()
         },
         handleCurrentChange (page) {
             this.page = page;
             this.getListInfo()

         },
         //全新勾选handleSelectionChange
         handleSelectionChange(row) {
             this.multipleSelection = row;
             
         },
         getKeyword  () {
             this.page = 1;
             this.getListInfo()
         },
         OnOpenDrawer() {
             this.drawerNewPlace = true;
             this.submit = "";
             this.idPlace = 0;
         },
         handleDelete(index, row ){
             if (row.filt > 0) {
                 this.$message({ message: "不能删除正在投放的广告位!", type: "error" })
                 return false;
             }
             this.$confirm('此操作将永久删除数据, 是否继续?', '提示').then(() => {
                    PlaceAPI.deletePlace( row.id).then( (ret)=> {
                        this.$message({ message: ret.msg})
                        this.tablelist.splice(index,1);
                        --this.total;
                    } )
             }).catch(() => {});
         },
         // 编辑 按钮 点击事件
         handleEdit( index, row ) {
          
            this.idPlace = row.id;
            this.drawerNewPlace = true;

         },
         //获取列表数据
         getListInfo  () {
             this.tableLoading = true;
             PlaceAPI.getAllsPlace(this.page, this.pageSize, this.queryParams).then((data)=> {
                 this.tableLoading = false;
               // for(var i in data){
                    // 把必须要的参数赋值进去
                    //data[i]['adtypeOptions'] = ;
              //  }
                this.total = data.total;
                this.tablelist = data.data;
                // console.log(data)
             })
         },
     } 
})

